<template>
  <!-- 新碟上架展示组件 -->
  <div class="new_disc_item">
    <div
      class="item"
      v-for="item in newDiscList"
      :key="item.id"
      @click="newDiscListItemClick(item)"
    >
      <div class="pic">
        <img :src="item.picUrl" alt="" class="pic_url" />
      </div>
      <div class="name" @click="newDiscListItemClick(item)">
        {{ item.name }}
      </div>
      <div class="author">{{ item.artist.name }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "NewDiscItem",
  setup(props, context) {
    let newDiscList = inject("newDiscList");

    let newDiscListItemClick = (item) => {
      context.emit("newDiscListItemClick", item);
    };
    return { newDiscList, newDiscListItemClick };
  },
});
</script>
<style scoped>
.new_disc_item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.item {
  width: 15%;
  margin: 20px;
  margin-top: 0;
}

.pic {
  width: 140px;
  height: 140px;
  margin: 0 auto;
}

.pic_url {
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.name,
.author {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 16px;
  color: #222;
  text-align: center;
  cursor: pointer;
}

.name:hover,
.author:hover {
  text-decoration: underline;
}
.author {
  font-size: 14px;
  color: #666;
}
</style>
